<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.js"></script>
  </head>
  <body>
 <!-- 
        路由参数的传递 
        1.利用router-link进行路由的传参  
            通过方法切换路由之后，地址栏是   http://127.0.0.1:5500/vue_router3.html#/news/001
            获取这个参数：$route.params.id来获取
        
        2.利用this.$router.push方法进行传参
            通过方法切换路由之后可以使用this.$route.parames.id    $route.query.userId
        注意：通过以上的方法进行传递参数的时候，如果要传递多个参数，需要在配置路由映射的时候在路径后面加多个  /:参数名

        可以通过JS来实现路由的跳转
        $router.push()方法来实现路由的跳转
        $router.go()

        3.通过路由中的name属性匹配，可以通过params传递参数
        注意：通过name匹配跌幅并通过params传参数的时候 在地址栏不会显示传递参数

        4.通过匹配name属性，并通过query放是传参

        5.也可以利用path匹配路由 ，并用query传参

    
    -->
    <div id="box">
        <!-- 需要将to设置为动态的属性  传递参数的时候就可以在对象当中添加params -->
      <router-link :to="{name:'h1',query:{id:1,name1:'getlist'}}" tag="button">首页</router-link>
      <router-link :to="{name:'l1',query:{id:2,name1:'gethome'}}"tag="button">列表</router-link>
      <router-view></router-view>
    </div>

    <script>
        //定义组件
        let home={
            methods:{
                fn(id,name){
                    //可以通过this.$router.push()进行传参，同样也需要配置相应的路由映射
                    this.$router.push({
                        name:"l1",
                       query:{
                            id:id,
                            name1:name
                        }
                    })
                }
            },
            //通过$route.params.id来获取到参数
            template:`<div @click="fn(3,'getlist')">首页传递的参数:{{$route.query.id}} {{$route.query.name1}}</div>`
        } 

        //定义组件
        let list={
            methods:{
                fn(id,name){
                    //可以通过this.$router.push()进行传参，同样也需要配置相应的路由映射
                    this.$router.push({
                        name:"h1",query:{
                            id:id,
                            name1:name
                        }
                    })
                }
            },
            //通过$route.params.id来获取到参数
            template:`<div @click="fn(4,'getindex')">首页传递的参数：{{$route.query.id}}{{$route.query.name1}}</div>`
        } 

      const routes = [
        { path: "/", redirect: "/home" },
        { path: "/home", component: home,name:"h1" },
        { path: "/list", component: list ,name:'l1'}
      ];

      const router = new VueRouter({
          routes
      })
      
      let vm = new Vue({
          el:"#box",
          router,
      })
    </script>
  </body>
</html>
